<template>
	<div class="container-wrap">
		<description logo="iconfont icon-alidfs" :title="title" :desc="desc" />
		<el-card class="table-wrap" shadow="never">
			<div class="operation mb15">
				<span></span>
				<span>
					<el-button type="primary" @click="createFileSystem" :disabled="state.fileSystemTable.data.length > 0">创建</el-button>
					<el-button type="danger" @click="delFileSystem" :disabled="!state.fileSystemTable.currentRow">删除</el-button>
					<el-button type="primary" @click="fileSystemList(true)">刷新</el-button>
				</span>
			</div>

			<el-table
				ref="tableRef"
				border
				v-loading="state.fileSystemTable.loading"
				element-loading-text="数据加载中..."
				:data="state.fileSystemTable.data"
				highlight-current-row
				row-key="fsName"
				height="calc(100vh - 405px)"
				@current-change="handleCurrentChange"
			>
				<!-- <el-table-column type="selection" :reserve-selection="true" align="center" width="55" /> -->
				<el-table-column prop="fsName" label="名称" min-width="130" show-overflow-tooltip />
				<el-table-column prop="metadataPoolName" label="元数据存储池" min-width="130" show-overflow-tooltip />
				<el-table-column prop="dataPoolName" label="数据存储池" min-width="130" show-overflow-tooltip />
				<el-table-column prop="status" label="状态" min-width="100" show-overflow-tooltip >
					<template #default="{row}">
						<el-tag :type="fileSystemStatusOptions.find(item=>item.value===row.status)?.type">
							{{ fileSystemStatusOptions.find(item=>item.value===row.status)?.label }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dataPoolUsedSize" label="存储用量" min-width="100" show-overflow-tooltip>
					<template #default="{row}">
						{{formatUnits(row.dataPoolUsedSize)}}
					</template>
				</el-table-column>
				<el-table-column prop="dataPoolTotalSize" label="存储容量" min-width="100" show-overflow-tooltip>
					<template #default="{row}">
						{{formatUnits(row.dataPoolTotalSize)}}
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog title="创建文件系统" v-model="createFileSystemVisible" :destroy-on-close="true" width="600px">
			<CreateFileSystem ref="createFileSystemRef" v-model:value="createFileSystemVisible" @RefreshList="fileSystemList(true)"/>
			<template #footer>
				<el-button @click="createFileSystemVisible = false">取消</el-button>
				<el-button type="primary" @click="handleCreateFileSystem">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, getCurrentInstance, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useFileStorageApi } from '/@/api/file-storage';
import { formatUnits } from '/@/utils/other';

export interface FileSystemRow{
	fsName:string,
	metadataPoolName:string,
	dataPoolName:string,
	dataPoolUsedSize:string,
	dataPoolTotalSize:string,
	status:string
}
interface FileSystemTabelState{
	fileSystemTable:{
		loading:boolean;
		data:FileSystemRow[];
		copyData:FileSystemRow[];
		params:{
			nodeName:string;
			nodeStatus:number|undefined;
		};
		currentRow:FileSystemRow|undefined;
	};
}

const Description = defineAsyncComponent(() => import('/@/components/description/index.vue'));
const CreateFileSystem = defineAsyncComponent(() => import('./components/createFileSystem.vue'));

const fileStorageApi = useFileStorageApi();
const title = '文件系统';
const desc = '分布式文件系统是具备高性能、高可靠性、可拓展的文件系统，可用于支持需要大规模数据存储和高性能访问的应用程序';
const fileSystemStatusOptions = [
	{ label: '离线', value: 0, type: 'danger' },
	{ label: '在线', value: 1, type: 'success' },
];

const state = reactive<FileSystemTabelState>({
	fileSystemTable: {
		loading: false,
		data: [],
		copyData: [],
		params: {
			nodeName: '',
			nodeStatus: undefined
		},
		currentRow: undefined
	}
});
const tableRef = ref();

// file-system list
const fileSystemList = (refresh:boolean = false) => {
	// Display loading
	refresh && (state.fileSystemTable.loading = true);
	fileStorageApi.getFileSystemList().then((res:any) => {
		state.fileSystemTable.data = res.data;
	}).catch(() => {
		state.fileSystemTable.copyData = [];
		state.fileSystemTable.data = [];
	}).finally(() => {
		state.fileSystemTable.loading = false;
	});
};
fileSystemList(true);

const handleCurrentChange = (val:FileSystemRow | undefined) => {
	state.fileSystemTable.currentRow = val;
};

// create file-system
const createFileSystemVisible = ref(false);
const createFileSystem = () => {
	createFileSystemVisible.value = true;
};

const createFileSystemRef = ref();
const handleCreateFileSystem = () => {
	createFileSystemRef.value.createFileSystem();
};

// ws refresh list
const { proxy } = <any>getCurrentInstance();
proxy.mittBus.on('refresh-list', () => {
	fileSystemList(true);
});

// delete file-system
const delFileSystem = () => {
	let { currentRow } = toRefs(state.fileSystemTable);
	if (!currentRow.value) {
		ElMessage.warning(`请先选择要删除的文件系统`);
	} else {
		ElMessageBox.confirm(
			`删除文件系统将同时删除文件系统的所有存储目录，确认删除文件系统：${currentRow.value?.fsName}`,
			'删除文件系统',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			state.fileSystemTable.loading = true;
			fileStorageApi.delFileSystem({ fsName: currentRow.value?.fsName }).then(() => {
				ElMessage.success(`删除文件系统 ${currentRow.value?.fsName} 成功`);
				tableRef.value?.setCurrentRow();
				fileSystemList(true);
			}).finally(() => {
				state.fileSystemTable.loading = false;
			});
		});
	}
};
</script>